<template>
  <div class="app-content">
    <div class="app-content__heard">
      <img class="heard--left__img" src="../assets/prev.png" alt="" @click="huitui">
      <span class="heard--text">确认订单</span>
    </div>
    <div class="app-content--address">
      <img src="../assets/coordinate.png" alt="" class="center-img">
      <span class="app-content--address__name">{{this.receiver}}</span>
      <span class="app-content--address__phoneNumber">{{this.phoneNumber}}</span><br>
      <span class="app-content--address__location">{{this.location}}</span>
      <span class="app-content--address__details">{{this.details}}</span>
    </div>
    <div class="block">
      <img class="Stripe" src="../assets/Stripe.png" alt="">
    </div>
    <div class="ConfirmCommodity">
      <img :src="this.arr[0].prod.prodImage[0]" alt="">
      <span class="ConfirmCommodity--num">共{{this.arr.length}}件</span><span><img class="num--image" src="../assets/go.png" alt=""></span>
    </div>
    <div class="PaymentMethod">
      <div class="PaymentMethod--line">
        <span class="mode">支付方式</span>
        <span class="line">在线支付</span>
      </div>
      <div class="PaymentMethod--Discount">
        <span class="mode">最高可优惠金额</span>
        <span class="line">30元</span>
      </div>
      <div class="PaymentMethod--Actual">
        <span class="mode">实际优惠金额</span>
        <span class="line">无可用</span>
      </div>
    </div>
    <div class="AmountOfMoney">
      <div class="money">
        <span class="mode">商品金额</span>
        <span class="Amount">￥{{this.money}}</span>
      </div>
      <div class="freight">
        <span class="mode">运费</span>
        <span class="freight-Amount">￥0</span>
      </div>
    </div>
    <div class="Total">
      <span class="Total__text">合计：</span>
      <span class="Total__money">￥{{this.money}}</span>
    </div>
    <div class="app-footer" @click="PlaceAnOrder">立即下单</div>
  </div>
</template>

<script>
export default {
  name: "Confirmation",
  data() {
    return {
      receiver: '',
      phoneNumber: '',
      location: '',
      details: '',
      Arr: [],
      arr: [],
      money: '',
      arrid: [],
      id: '',
      payment: '',
    }
  },
  methods: {
    huitui(){
      this.$router.go(-1);
    },
    PlaceAnOrder(){
      this.$apis.CreateOrder({
        carts: this.arrid,
        addr: this.id,
        payStatus: 0,
      })
        .then(data =>{
          this.$router.push({name: 'payment', params: {data: data.data.data}});
        })
        .catch(error => {
          console.log(error);
        })
    }
  },
  created() {
    this.arrid = this.$route.params.newid;
    this.arr = this.$route.params.data;
    console.log(this.arr);
    this.money = this.$route.params.money;
    this.$apis.getaddr()
      .then(data => {
        this.Arr = data.data.data;
        this.receiver = data.data.data[0].receiver;
        this.phoneNumber = data.data.data[0].phoneNumber;
        this.location = data.data.data[0].location;
        this.details = data.data.data[0].details;
        this.id = data.data.data[0]._id;
        console.log(data);
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

<style scoped>
  .app-content{
    width: 100vw;
    height: 100vh;
    background: #f0eff5;
  }
  .app-content__heard{
    width: 100vw;
    height: 80px;
    background: white;
    border-bottom: 1px solid #e3e3e3;
  }
  .heard--left__img{
    width: .5rem;
    height: .5rem;
    position: absolute;
    left: .4rem;
    top: .3rem;
  }
  .heard--text{
    display: inline-block;
    font-size: 32px;
    width: 150px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: #2e2e2e;
    margin-left: 315px;
  }
  .app-content--address{
    width: 100vw;
    height: 156px;
    background: white;
  }
  .center-img{
    display: inline-block;
    width: 40px;
    margin: 59px 29px;
    float: left;
  }
  .app-content--address__name{
    display: inline-block;
    margin-top: 27px;
    font-size: 28px;
    color: #1b1b1b;
  }
  .app-content--address__phoneNumber{
    display: inline-block;
    font-size: 28px;
    color: #1b1b1b;
    margin-left: 320px;
  }
  .app-content--address__location{
    display: inline-block;
    font-size: 22px;
    color: #656565;
    margin-top: 48px;
  }
  .app-content--address__details{
    display: inline-block;
    font-size: 22px;
    color: #656565;
    margin-left: 10px;
  }
  .Stripe{
    width: 100vw;
    position: relative;
    top: -10px;
  }
  .ConfirmCommodity{
    width: 100vw;
    height: 221px;
    background: white;
    margin-top: -15px;
  }
  .ConfirmCommodity>img{
    display: inline-block;
    width: 140px;
    height: 150px;
    margin: 30px 43px;
  }
  .ConfirmCommodity--num{
    display: inline-block;
    width: 20vw;
    font-size: 30px;
    margin-left: 560px;
    position: relative;
    text-align: center;
    top: -120px;
  }
  .num--image{
    display: inline-block;
    width: .5rem;
    position: relative;
    top: -112px;
    left: -20px;
  }
  .PaymentMethod{
    width: 100vw;
    height: 246px;
    background: white;
    margin-top: 14px;
  }
  .PaymentMethod--line{
    width: 100vw;
    height: 82px;
    line-height: 82px;
  }
  .mode{
    line-height: 82px;
    display: inline-block;
    margin-left: 30px;
    font-size: 26px;
    color: #868686;
  }
  .line{
    position: absolute;
    right: 55px;
    margin: auto;
    color: #252525;
  }
  .PaymentMethod--Discount{
    width: 100vw;
    height: 82px;
    line-height: 82px;
  }
  .PaymentMethod--Actual{
    width: 100vw;
    height: 82px;
    line-height: 82px;
  }
  .AmountOfMoney{
    width: 100vw;
    height: 166px;
    margin-top: 3px;
    background: white;
  }
  .Amount{
    position: absolute;
    right: 55px;
    margin: auto;
    color: #252525;
    line-height: 82px;
  }
  .freight-Amount{
    position: absolute;
    right: 55px;
    margin: auto;
    color: #ed6b4c;
    line-height: 82px;
  }
  .Total{
    width: 100vw;
    height: 83px;
    background: white;
    margin-top: 13px;
  }
  .Total__text{
    line-height: 78px;
    position: absolute;
    right: 125px;
    margin: auto;
    color: #252525;
  }
  .Total__money{
    line-height: 83px;
    position: absolute;
    right: 55px;
    margin: auto;
    color: #ed6b4c;
  }
  .app-footer{
    width: 100vw;
    height: 84px;
    background: #579cf6;
    text-align: center;
    line-height: 84px;
    color: white;
    font-size: 33px;
    position: absolute;
    bottom: 0;
    margin: auto;
  }
</style>
